<!-- 必须使用统一的popup，以方便控制z-index -->
<template>
	<uni-popup ref="popup" onClick="event.cancelBubble=true" :animation="animation" :type="type" :isMaskClick="isMaskClick" :backgroundColor="backgroundColor" :safeArea="safeArea" :maskBackgroundColor="maskBackgroundColor" :borderRadius="borderRadius" @maskClick="onMaskClick">
		<!-- 对微信小程序为何仍然无效！小程序执行open时该组件维持上次关闭前的样子 -->
		<template v-if="isShow">
			<slot></slot>
		</template>
	</uni-popup>
</template>

<script>
	
	/**
	 * PopUp 弹出层
	 * @description 弹出层组件，为了解决遮罩弹层的问题
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
	 * 	@value top 顶部弹出
	 * 	@value center 中间弹出
	 * 	@value bottom 底部弹出
	 * 	@value left	  左侧弹出
	 * 	@value right  右侧弹出
	 * 	@value message 消息提示
	 * 	@value dialog 对话框
	 * 	@value share 底部分享示例
	 * @property {Boolean} animation = [true|false] 是否开启动画
	 * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
	 * @property {String}  backgroundColor 主窗口背景色
	 * @property {String}  maskBackgroundColor 蒙版颜色
	 * @property {Boolean} safeArea		   是否适配底部安全区
	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
	 * @event {Function} maskClick 点击遮罩触发
	 */
	
	import base from '@/components/index.vue'
	
	export default {
		extends: base,
		emits: ['close'],
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			// message: 消息提示 ; dialog : 对话框
			type: {
				type: String,
				default: 'center'
			},
			// maskClick
			isMaskClick: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: 'none'
			},
			safeArea: {
				type: Boolean,
				default: true
			},
			maskBackgroundColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.4)'
			},
			borderRadius: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				// 是否显示出来
				isShow: false,
				/**
				 * 记录是否需要执行其它悬浮组件的变化，已经执行过就不需要
				 * 在该版中目前暂未使用到
				 */
				hasHandled: false
			}
		},
		mounted() {
			
		},
		methods: {
			/**
			 * 打开对话框
			 * @param {String} type 类型
			 * @param {Boolean || String} zIndex 是否继续悬浮。如果是字符串，表示限定的内容继续悬浮，其它不变
			 */
			open(type, zIndex) {
				if (this.hasHandled) {
					// 已经执行过
				} else {
					
				}
				this.$refs.popup.open(type)
				this.isShow = true
			},
			
			/**
			 * 关闭对话框
			 * 显示出来才需要执行
			 */
			close(e) {
				if (this.isShow) {
					if (this.hasHandled) {
						// 已经执行过
					} else {
						
					}
					if (!e || !e.mask) {
						this.$refs.popup.close()
					}
					this.isShow = false
					this.$emit('close')
				}
			},
			
			// 点击蒙版的处理。已经关闭了蒙版，所以不用再次关闭
			onMaskClick() {
				if (this.isMaskClick) {
					this.close({mask: true})
				}
			},
		}
	}
</script>

<style>
</style>